<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
  borderR: {
    type: Boolean,
    default: true,
  },
  product: {
    type: Object
  }
});

const getImg = (str: String, index: any) => {
  let arr = str.split(',');
  return arr[index];
};
 const toRoute = () => {
    router.push({path: "/productDetail", query: {productId: props.product.productId}})
  }
</script>

<template>
  <section class="homeModelFourUtil" @click="toRoute()" :class="{'br': borderR}">
    <div class="title">
      <div class="product-title">{{props.product.productName2}}</div>
      <div class="desc">{{props.product.productDescription}}</div>
    </div>
    <div class="img-wrap">
      <div class="img-icon" :style="{background: `#333 url(${getImg(props.product.productIcon, 0)}) no-repeat center`}"></div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.homeModelFourUtil {
  width: 1.86rem;
  min-height: 1.2rem;
  background: white;
  padding: .1rem;
  box-sizing: border-box;
  display: flex;
  position: relative;
  &.br:after {
    height: 100%;
    content: "";
    width: .01rem;
    border-right: .01rem solid transparent;
    position: absolute;
    background: #f5f5f5;
    top: 0;
    right: 0;
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
    z-index: 10;
  }
  .title {
    width: .8rem;
    .product-title {
      height: .22rem;
      line-height: .22rem;
      overflow: hidden;
      font-size: .18rem;
      color: #222;
      margin-bottom: .05rem;
    }
    .desc {
      color: #FF5959;
      font-size: .12rem;
      height: .16rem;
      line-height: .16rem;
      overflow: hidden;
      margin-bottom: .1rem;
    }
  }
  .img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .img-icon {
      width: .8rem;
      height: .8rem;
      background-size: cover !important;
    }
  }
}
</style>
